<template>
  <div>
    <el-form label-position="left" style="width:100%;">
      <el-tree ref="tree" :data="formData.sysMenus" show-checkbox node-key="id" :check-strictly="true" default-expand-all :default-checked-keys="formData.menuIds" :props="defaultProps">
        <span slot-scope="{ node,data }" class="custom-tree-node">
          <span style="padding-right: 30px;">{{ node.label }}</span>
          <span v-for="(item) in formData.roleMenus" :key="item.id">
            <el-checkbox v-if="data.id === item.menuId && data.pid !== 0 && item.type === 1" checked @change="handleCheckedChange(item)">只允许查看</el-checkbox>
            <el-checkbox v-if="data.id === item.menuId && data.pid !== 0 && item.type === 0" @change="handleCheckedChange(item)">只允许查看</el-checkbox>
          </span>
        </span>
      </el-tree>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button icon="el-icon-close" @click="cancel">取消</el-button>
      <el-button v-waves :loading="confirmLoading" type="primary" icon="el-icon-check" @click="submit">确定</el-button>
    </div>
  </div>
</template>
<script>
import { getSysRoleDetail, getSysRoleMenu, editSysRoleMenu } from '@/api/role';
import { getSysMenu } from '@/api/menu';
import waves from '@/directive/waves';

export default {
  name: 'SysRoleMenu',
  directives: { waves },
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      confirmLoading: false,
      formData: {
        id: null,
        roleName: '',
        roleId: null,
        menuIds: [],
        sysMenus: [],
        roleMenus: []
      },
      defaultProps: {
        children: 'children',
        label: 'menuName'
      }
    };
  },
  created() {
    this.getRoleDetail(this.id);
    this.getRoleMenu(this.id);
    this.getSysMenu();
  },
  methods: {
    async getRoleDetail(id) {
      await getSysRoleDetail(id).then(response => {
        this.formData.id = response.data.id;
        this.formData.roleName = response.data.roleName;
        this.formData.roleId = response.data.roleId;
      });
    },
    async getRoleMenu(id) {
      await getSysRoleMenu(id).then(response => {
        response.data.forEach(item => {
          this.formData.menuIds.push(item.menuId);
        });
        this.formData.roleMenus = response.data;
      });
    },
    async getSysMenu() {
      await getSysMenu({
        pageNum: 1,
        pageSize: 9999
      }).then(response => {
        this.formData.sysMenus = response.data.list;
      });
    },
    async submit() {
      this.formData.menuIds = this.$refs.tree.getCheckedKeys();
      if (this.formData.menuIds.length === 0) {
        this.$message.error('请至少设置一个菜单');
        return;
      }
      this.confirmLoading = true;
      await editSysRoleMenu(this.formData).then(res => {
        this.confirmLoading = false;
        if (res.msg !== 'OK') {
          this.$message.error(res.msg);
          return;
        }
        this.$message.success('菜单设置成功');
        this.$emit('cancelClose', true, 'menu');
      });
    },
    cancel() {
      this.$emit('cancelClose', false, 'menu');
    },
    handleCheckedChange(item) {
      const position = this.formData.roleMenus.indexOf(item);
      if (position) {
        if (item.type === 0) {
          item.type = 1
        } else {
          item.type = 0
        }
        this.$set(this.formData.roleMenus, position, item);
      }
    }
  }
};
</script>
<style>
.el-tree {
  margin-bottom: 30px;
}
</style>
